<template>
	<view>
		<!-- 自定义导航栏 -->
		<news-nav-bar :tabBars="tabBars" :tabIndex="tabIndex" @change-tab="changeTab"></news-nav-bar>
		<!-- 轮播视图 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" 
			:style="{'height':swiperheight + 'px'}"
			:current="tabIndex"
			@change="tabChange">
				<!-- 关注 -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="loadmore">
						<!-- 列表内容 -->
						<block v-for="(item, index) in followList.list" :key="index">
							<common-list :item="item" :index="index"></common-list>
						</block>
						<!-- 上拉加载更多 -->
						<load-more :loadtext="followList.loadtext"></load-more>
					</scroll-view>
				</swiper-item>
				<!-- 话题 -->
				<swiper-item>
					<scroll-view scroll-y class="list">
						<!-- 搜索框 -->
						<view class="search-input">
							<input class="uni-input" placeholder-class="icon iconfont icon-sousuo u-f-ajc place-holder" placeholder="搜索内容"/>
						</view>
						<!-- 轮播图 -->
						<swiper class="topic-swiper" :indicator-dots="true" :autoplay="true" circular="false" :interval="3000" :duration="1000">
							<block v-for="(item, index) in topic.swiper" :key="index">
								<swiper-item>
									<image class="topic-swiper-img" :src="item.src" mode="aspectFill" lazy-load></image>
								</swiper-item>
							</block>
						</swiper>
						<!-- 热门分类 -->
						<topic-nav :nav="topic.nav"></topic-nav>
						<!-- 最近更新 -->
						<view class="topic-news">
							<!-- 标题 -->
							<view>最近更新</view>
							<block v-for="(item, index) in topic.list" :key="index">
								<topic-list :item="item" :index="index"></topic-list>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
	</view>
</template>

<script>
	import newsNavBar from '../../components/news/news-nav-bar.vue';
	import commonList from '../../components/common/common-list.vue';
	import loadMore from '../../components/common/load-more.vue';
	import topicNav from '../../components/news/topic-nav.vue';
	import topicList from '../../components/news/topic-list.vue';
	export default {
		components:{
			newsNavBar,
			commonList,
			loadMore,
			topicNav,
			topicList
		},
		data() {
			return {
				swiperheight: 500,
				tabIndex: 0,
				tabBars: [
					{name: '关注', id: 'guanzhu'},
					{name: '话题', id: 'huati'}
				],
				followList: {
					loadtext: '上拉加载更多',
					list:[
						// 文字
						{
							avatar: '../../static/images/logo.png',
							nickname: 'Zero',
							sex: 1, // 0：男，1：女
							age: 25,
							isfollow: false,
							title: '今天撸猫猫',
							cover: '',
							video: false,
							share: false,
							address: '苏州 虎丘',
							sharenum: 25,
							commentnum: 200,
							likenum:20
						},
						// 图文
						{
							avatar: '../../static/images/logo.png',
							nickname: 'Zero',
							sex: 0, // 0：男，1：女
							age: 25,
							isfollow: false,
							title: '今天撸猫猫',
							cover: '../../static/images/shuijiao.jpg',
							video: false,
							share: false,
							address: '苏州 虎丘',
							sharenum: 25,
							commentnum: 200,
							likenum:20
						},
						// 视频
						{
							avatar: '../../static/images/logo.png',
							nickname: 'Zero',
							sex: 0, // 0：男，1：女
							age: 25,
							isfollow: true,
							title: '今天撸猫猫',
							cover: '../../static/images/shuijiao.jpg',
							video: {
								looknum: '20W',
								time: '2:40'
							},
							share: false,
							address: '苏州 虎丘',
							sharenum: 25,
							commentnum: 200,
							likenum:20
						},
						// 分享
						{
							avatar: '../../static/images/logo.png',
							nickname: 'Zero',
							sex: 0, // 0：男，1：女
							age: 25,
							isfollow: false,
							title: '今天撸猫猫',
							cover: '',
							video: false,
							share: {
								title: '分享标题',
								cover: '../../static/images/cbd.jpg'
							},
							address: '苏州 虎丘',
							sharenum: 25,
							commentnum: 200,
							likenum:20
						}
					]
				},
				topic: {
					swiper: [
						{
							src: '../../static/images/cbd.jpg',
						},
						{
							src: '../../static/images/muwu.jpg',
						},
						{
							src: '../../static/images/shuijiao.jpg',
						}
					],
					nav:[
						{name: '最新'},
						{name: '游戏'},
						{name: '打卡'},
						{name: '情感'},
						{name: '故事'},
						{name: '喜爱'}
					],
					list:[
						{
							cover: '../../static/images/cbd.jpg',
							title: '今日份--吃',
							desc: '吃的过瘾',
							totalnum: 245,
							todaynum: 23445
						},
						{
							cover: '../../static/images/cbd.jpg',
							title: '今日份--喝',
							desc: '喝的痛快',
							totalnum: 245,
							todaynum: 23445
						},
						{
							cover: '../../static/images/cbd.jpg',
							title: '今日份--玩',
							desc: '玩的舒服',
							totalnum: 245,
							todaynum: 23445
						},
						{
							cover: '../../static/images/cbd.jpg',
							title: '今日份--乐',
							desc: '快乐就是这么简单',
							totalnum: 245,
							todaynum: 23445
						}
					]
				},
				
			}
		},
		onLoad() {
			/* 获取屏幕的可用高度 */
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					console.log(height);
					this.swiperheight = height;
				}
			});
		},
		methods: {
			
			/* 修改选中的导航 */
			changeTab(index){
				this.tabIndex = index;
			},
			/* 滑动导航变化 */
			tabChange(e){
				this.tabIndex = e.detail.current;
			},
			/* 上拉加载更多 */
			loadmore(){
				if(this.followList.loadtext !== '上拉加载更多'){
					return;
				}
				// 修改加载状态
				this.followList.loadtext = '加载中···';
				// 获取数据
				setTimeout(() => {
					var obj = {
						
					};
					// 获取完成
					this.followList.loadtext = '上拉加载更多';
				}, 1000)
				
				
				// this.followList.loadtext = '没有更多数据了';
			}
		}
	}
</script>

<style>
	.search-input{
		padding: 20upx;
	}
	.search-input>input{
		background: #F4F4F4;
		border-radius: 10upx;
	}
	.place-holder{
		font-size: 25upx;
	}
	.topic-swiper{
		padding: 0 20upx 20upx 20upx;
		margin-bottom: 10upx;
	}
	.topic-swiper-img{
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}
	
	.topic-news{
		padding: 20upx;
	}
	.topic-news>view:first-child{
		padding-bottom: 10upx;
		font-size: 32upx;
	}
</style>
